<template>
	<view class="content">
		<view class="icon center">
			<imageForSize size="80" radius="23" :src="logo">
			</imageForSize>
		</view>
		<h2>{{where}}</h2>
		<h3>{{title}}</h3>
		<text class="contain">{{$t('Contract.DearMerchant')}}: {{name}}</text>
		<text class="num">{{$t('Contract.globalBianhao')}}<text>{{num}}</text></text>
		<text class="contain">{{$t('Contract.pihao')}}</text>

		<view class="line">
		</view>
		<text class="contain">{{$t('Contract.gongxinin')}}{{sort}}{{$t('Contract.huoban')}}</text>
		<text
			class="contain">{{$t('Contract.xiangshou')}}{{where}}{{$t('Contract.shouyi')}}{{$t('Contract.zhichi')}}</text>
		<text class="contain">{{$t('Contract.fanwei')}}</text>

		<view class="people">
			<view class="">
				<text>{{$t('Contract.qianming')}}:</text>
				<imageForSize w="200rpx" h="150rpx" v-if="sign" :src="sign"></imageForSize>
				<text v-else>{{name}}</text>
			</view>
			<text class="time">{{$t('Contract.shijian')}}:<br> {{time}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "certificateContract",
		props: {
			title: {
				type: String,
				default: ''
			},
			// 店铺logo
			logo: {
				default: require('@/static/images/certificate-icon.png'),
				type: String
			},
			num: {
				type: Number | String,
				default: 0
			},
			sort: {
				type: String,
				default: 'XXX'
			},
			where: {
				type: String,
				default: 'XXX'
			},
			name: {
				type: String,
				default: ''
			},
			time: {
				type: String,
				default: "2023.5.25"
			},
			bianhao: {
				type: Number,
				default: 1234223432344234
			},
			sign: {
				detault: '',
				type: String
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url("@/static/images/CertificateContract.png");
		background-size: 100% 100%;
		background-position: center;
		padding: 80rpx;
		font-size: 28rpx;

		h2,
		h3 {
			text-align: center;
		}

		.center {
			display: flex;
			justify-content: center;
		}

		.num {
			display: inline-block;

			text {
				font-weight: bold;
				margin-left: 10rpx;
				display: inline-block;
			}
		}

		.contain {
			display: inline-block;
			line-height: 2;
		}

		.line {
			border: 1rpx solid black;
			margin: 40rpx;
			width: 100%;
			transform: translateX(-40rpx);
		}

		.thanks {
			display: inline-block;
			margin-top: 40rpx;
			text-align: right;
			width: 100%;
		}

		.people {
			display: inline-flex;
			width: 100%;
			font-size: 12px;
			overflow: auto;
			align-items: flex-start;
			justify-content: space-between;
			>view{
				display: flex;
			}
			view>text ,  text {
				margin-top: 40rpx;
			}
		}

		.time {
			display: inline-block;
			font-size: 12px;
			text-align: right;
		}

		.bottomtext {
			display: block;
			text-align: center;
			font-size: 8rpx;
		}
	}
</style>